<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折叠菜单</title>
    
</head>
<body>
    <div id="fold">
        <ul>
        	<li>
        	<a href="#">信息管理</a>
        	<ul class="wrap">
        	    <li><a href="#">未读信息</a></li>
        	    <li><a href="#">已读信息</a></li>
        	    <li><a href="#">信息列表</a></li>
        	</ul>
        	</li>
        	<li>
        	<a href="#">商品管理</a>
        	<ul class="wrap">
        	    <li><a href="#">商品添加</a></li>
        	    <li><a href="#">商品列表</a></li>
        	    <li><a href="#">商品分类</a></li>
        	</ul>
        	</li>
        	<li>
        	<a href="#">用户管理</a>
        	<ul class="wrap">
                <li><a href="#">权限设置</a></li>
                <li><a href="#">用户列表</a></li>
        	    <li><a href="#">重置密码</a></li>
        	</ul>
        	</li>
        </ul>
    </div>
    <script src="./jquery-3.2.1.min.js"></script>
    <script>
        $('#fold>ul>li:first').find('.wrap').css({
        	display: 'block'
        });
        $('#fold>ul>li').click(function () {
        	$(this).siblings('li').find('.wrap').css({
        	    display: 'none'
        	});
        	$(this).find('.wrap').css({
        	    display: 'block'
        	});
        });
    </script>
       
</body>
</html>